<template>
  <div class="order-details">
    <el-row>
      <el-col :span="24">
        <div class="right operation-bar">
          <el-button :disabled="disabledBtn" type="danger" @click="handleRemove">删除</el-button>
          <el-button :disabled="disabledBtn" type="primary" @click="handleSetAtDer">设为贬损者</el-button>
          <el-button :disabled="disabledBtn" type="primary" @click="handleSetAtPas">设为被动者</el-button>
          <el-button :disabled="disabledBtn" type="primary" @click="handleSetAtRec">设为推荐者</el-button>
        </div>
      </el-col>
    </el-row>
    <table>
      <tbody>
      <tr>
        <td class="key">项目名称</td>
        <td class="value">{{baseInfo.itemName}}</td>
        <td class="key">回访任务</td>
        <td class="value">{{baseInfo.reviewTask}}</td>
      </tr>
      <tr>
        <td class="key">用户姓名</td>
        <td class="value">{{baseInfo.userName}}</td>
        <td class="key">用户类型</td>
        <td class="value">{{baseInfo.userType}}</td>
      </tr>
      <tr>
        <td class="key">分公司</td>
        <td class="value">{{baseInfo.branchCompany}}</td>
        <td class="key">分公司办事处</td>
        <td class="value">{{baseInfo.branchOffice}}</td>
      </tr>
      <tr>
        <td class="key">分部</td>
        <td class="value">{{baseInfo.branchDepartment}}</td>
        <td class="key">分部经营部</td>
        <td class="value">{{baseInfo.branchDepartmentBusiness}}</td>
      </tr>
      <tr>
        <td class="key">店铺名称</td>
        <td class="value">{{baseInfo.shopName}}</td>
        <td class="key">商场</td>
        <td class="value">{{baseInfo.superMarket}}</td>
      </tr>
      <tr>
        <td class="key">购买时间</td>
        <td class="value">{{formatDate(baseInfo.buyTime)}}</td>
        <td class="key">购买渠道</td>
        <td class="value">{{baseInfo.purchaseChannel}}</td>
      </tr>
      <tr>
        <td class="key">渠道类型</td>
        <td class="value">{{baseInfo.channelType}}</td>
        <td class="key">月份</td>
        <td class="value">{{baseInfo.month}}</td>
      </tr>
      <tr>
        <td class="key">外呼时间</td>
        <td class="value">{{formatDate(baseInfo.callOutTime)}}</td>
        <td class="key">外呼结果</td>
        <td class="value">{{baseInfo.callOutResult}}</td>
      </tr>
      <tr>
        <td class="key">贬损大类</td>
        <td class="value">{{getDeroCategoriesText(derogatoryInfo.derogatoryCategories)}}</td>
        <td class="key">分类</td>
        <td class="value">{{getClassifyText(baseInfo.classify)}}</td>
      </tr>
      <tr>
        <td class="key">产品品牌</td>
        <td class="value">{{baseInfo.productBrand}}</td>
        <td class="key">产品型号</td>
        <td class="value">{{baseInfo.productModel}}</td>
      </tr>
      <tr>
        <td class="key">销售时间</td>
        <td class="value">{{baseInfo.saleTime}}</td>
        <td class="key">selecttime</td>
        <td class="value">{{baseInfo.selectTime}}</td>
      </tr>
      <tr>
        <td class="key">回单类型</td>
        <td class="value">{{baseInfo.receiptBillType}}</td>
        <td class="key">case单号</td>
        <td class="value">{{baseInfo.caseBillNb}}</td>
      </tr>
      <tr>
        <td class="key">产品大类</td>
        <td class="value">{{baseInfo.productCategories}}</td>
        <td class="key">保修类型</td>
        <td class="value">{{baseInfo.warrantyType}}</td>
      </tr>
      <tr>
        <td class="key">使用情况</td>
        <td class="value">{{baseInfo.useCase}}</td>
        <td class="key">使用情况备注</td>
        <td class="value">{{baseInfo.useCaseComment}}</td>
      </tr>
      <tr>
        <td class="key">整体推荐程度</td>
        <td class="value">{{baseInfo.overallRecommendationLevel}}</td>
        <td class="key">整体推荐程度备注</td>
        <td class="value">{{baseInfo.overallRecommendationLevelComment}}</td>
      </tr>
      <tr>
        <td class="key">评分理由</td>
        <td class="value">{{baseInfo.scoreReasons}}</td>
        <td class="key">评分理由备注</td>
        <td class="value">{{baseInfo.scoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐程度</td>
        <td class="value">{{baseInfo.salesSectionRecommendationLevel}}</td>
        <td class="key">销售环节推荐程度备注</td>
        <td class="value">{{baseInfo.salesSectionRecommendationLevelComment}}</td>
      </tr>
      <tr>
        <td class="key">销售环节推荐评分理由</td>
        <td class="value">{{baseInfo.salesSectionRecommendationScoreReasons}}</td>
        <td class="key">销售环节推荐评分理由备注</td>
        <td class="value">{{baseInfo.salesSectionRecommendationScoreReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">销售推荐or不推荐原因</td>
        <td class="value">{{baseInfo.salesRecommendationReasons}}</td>
        <td class="key">销售推荐or不推荐原因备注</td>
        <td class="value">{{baseInfo.salesRecommendationReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">服务推荐or不推荐原因</td>
        <td class="value">{{baseInfo.serverRecommendationReasons}}</td>
        <td class="key">服务推荐or不推荐原因备注</td>
        <td class="value">{{baseInfo.serverRecommendationReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">物流推荐or不推荐原因</td>
        <td class="value">{{baseInfo.logisticsRecommendationReasons}}</td>
        <td class="key">物流推荐or不推荐原因备注</td>
        <td class="value">{{baseInfo.logisticsRecommendationReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">产品推荐or不推荐原因</td>
        <td class="value">{{baseInfo.productRecommendationReasons}}</td>
        <td class="key">产品推荐or不推荐原因备注</td>
        <td class="value">{{baseInfo.productRecommendationReasonsComment}}</td>
      </tr>
      <tr>
        <td class="key">贬损原因</td>
        <td class="value" colspan="3">{{derogatoryInfo.derogatoryReason}}</td>
      </tr>
      <tr>
        <td class="key">外呼结果备注</td>
        <td class="value" colspan="3">{{baseInfo.callOutResultComment}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

  import {
    npsReportsClassify,
    removeNpsReportsOrders,
    getNpsReportsOrderDetails
  } from "@/service/getData";

  export default {
    data() {
      return {
        baseInfo: {},
        derogatoryInfo: {},
        disabledBtn: false
      }
    },
    computed: {
      orderId() {
        return this.$route.params.id
      }
    },
    created() {
      this.getOrderDetails()
    },
    methods: {

      // 获取订单详情
      getOrderDetails() {
        const orderId = this.orderId
        getNpsReportsOrderDetails({orderId}).then(res => {
          const data = res.data.data || {}
          this.baseInfo = data.npsBaseInfo || {}
          this.derogatoryInfo = data.npsDerogatoryInfo || {}
        }).catch(err => {

        })
      },

      // 设为贬损者
      handleSetAtDer() {
        this.manuallyClassify('0')
      },

      // 设为被动者
      handleSetAtPas() {
        this.manuallyClassify('1')
      },

      // 设为推荐者
      handleSetAtRec() {
        this.manuallyClassify('2')
      },

      // 设置订单分类
      manuallyClassify(classify) {
        this.disabledBtn = true
        npsReportsClassify([this.orderId], classify).then(res => {
          this.getOrderDetails()
          this.$message.success(res.data.data)
        }).catch(err => {
          this.$message.error('设置分类时出错，请重新操作！')
        }).finally(() => {
          this.disabledBtn = false
        })
      },

      // 删除前校验
      handleRemove() {
        const tips = '确定删除该条订单？'
        const title = ''
        this.$confirm(tips, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.removeNpsReportsOrders([this.orderId])
        }).catch(() => {

        });
      },

      // 删除订单
      removeNpsReportsOrders(orders) {
        this.disabledBtn = true
        removeNpsReportsOrders(orders).then(res => {
          this.$message({
            message: res.data.data,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.$router.push({name: 'NpsReportsOrdersList'})
            }
          });
        }).catch(err => {
          this.$message.error('删除订单时出错，请重新操作！')
        }).finally(() => {
          this.disabledBtn = false
        })
      },

      // 贬损大类
      getDeroCategoriesText(value) {
        const items = ['其他', '卖场', '安装', '送货', '品牌', '服务', '产品']
        return items[value]
      },

      getClassifyText(value) {
        const items = ['贬损者', '被动者', '推荐者', '未分类', '全部']
        return items[value]
      },

      // 日期格式化
      formatDate(date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>

<style lang="scss" scoped>

  .right {
    float: right;
  }

  .operation-bar {
    padding-bottom: 25px;
  }

  table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
  }

  td {
    padding: 10px;
    border: 1px solid #dcdfe6;
  }

  .key {
    width: 20%;
    background-color: #f2f6fc;
  }

  .value {
    width: 30%;
    background-color: #fff;
  }

</style>
